const CertificateTemplate = `
  <el-card v-show="isEmpty" class="box-card">
    <div slot="header" class="clearfix">
      <span>证书信息</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" label-width="117px" size="small">
      <el-row>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="证书">
          <el-col :span="8">
            <el-input placeholder="请输入证书名称" v-model="formData.cer1" class="input-with-select">
            </el-input>
          </el-col>
          <el-col :span="16">
            <el-upload
              action="#"
              ref="zh1"
              :file-list="fileList[0]"
              :auto-upload="false"
              :limit="limitCount"
              list-type="picture-card"
              :on-change="(file, fileList) => handlePictureChange(file, fileList, 'cer1')"
              :on-preview="handlePicturePreview"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'cer1')">
              <i style="line-height: 148px;" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="证书">
          <el-col :span="8">
            <el-input placeholder="请输入证书名称" v-model="formData.cer2" class="input-with-select">
            </el-input>
          </el-col>
          <el-col :span="16">
            <el-upload
              action="#"
              ref="zh2"
              :file-list="fileList[1]"
              :auto-upload="false"
              :limit="limitCount"
              list-type="picture-card"
              :on-change="(file, fileList) => handlePictureChange(file, fileList, 'cer2')"
              :on-preview="handlePicturePreview"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'cer2')">
              <i style="line-height: 148px;" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="证书">
          <el-col :span="8">
            <el-input placeholder="请输入证书名称" v-model="formData.cer3" class="input-with-select">
            </el-input>
          </el-col>
          <el-col :span="16">
            <el-upload
              action="#"
              ref="zh3"
              :file-list="fileList[2]"
              :auto-upload="false"
              :limit="limitCount"
              list-type="picture-card"
              :on-change="(file, fileList) => handlePictureChange(file, fileList, 'cer3')"
              :on-preview="handlePicturePreview"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'cer3')">
              <i style="line-height: 148px;" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="证书">
        <el-col :span="8">
            <el-input placeholder="请输入证书名称" v-model="formData.cer4" class="input-with-select">
            </el-input>
          </el-col>
          <el-col :span="16">
            <el-upload
              action="#"
              ref="zh4"
              :file-list="fileList[3]"
              :auto-upload="false"
              :limit="limitCount"
              list-type="picture-card"
              :on-change="(file, fileList) => handlePictureChange(file, fileList, 'cer4')"
              :on-preview="handlePicturePreview"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'cer4')">
              <i style="line-height: 148px;" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
`;

Vue.component('app-certificate', {
  name: 'app-certificate',
  template: CertificateTemplate,
  props: ['fileMap', 'type'],
  data() {
    return {
      limitCount: 1,
      dialogVisible: false,
      isEmpty: false,
      dialogImageUrl: '',
      fileDic: new Map(),
      formData: {
        cer1: '',
        cer2: '',
        cer3: '',
        cer4: ''
      },
    }
  },
  watch: {
    formData: {
      handler: function (val) {
        for(let key in val) {
          // 如果当前不是查看操作，不管是否填写都展示
          if (val[key]) {
            this.isEmpty = true;
            return;
          }
        }
      },
      deep: true
    },
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
    fileList() {
      ['', 'look'].includes(this.type) || (this.isEmpty = true);
      const maps = ['id-front', 'id-back', 'byz', 'xwz', '1cun', '2cun', 'biyezheng1', 'xueweizheng1', 'zhucebiao1', 'biyezheng2', 'xueweizheng2', 'zhucebiao2', 'jiaofei', 'youhui', 'qita', 'tuikuan'];
      const resultArray = [];
      let fileList = this.fileMap.filter(item => item.property.includes('|cer'));

      fileList = fileList.map((item, index) => {
        // const cerValue = item.property.replace(`|cer${index + 1}`, '');
        // 取出证书的值和该值对应的输入框索引
        const [cerValue, cerIndex] = item.property.replace('cer', '').split('|');

        if (!maps.includes(cerValue)) {
          !this.isEmpty && (this.isEmpty = true);
          this.formData[`cer${cerIndex}`] = cerValue;
          this.$nextTick(() => {
            this.$refs[`zh${cerIndex}`].$children[1].$el.style = 'display: none;';
          });
          resultArray[cerIndex - 1] = [{
            name: cerValue,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(item.fileResource)}`
          }]
        }
      });
      return resultArray;
    },
  },
  methods: {
    hideOrShowUpload(name, isShow) {
      switch (name) {
        case 'cer1':
          console.log(`zh1`, this.$refs.zh1);
          this.$refs.zh1.$children[1].$el.style = isShow ? '' : 'display: none;';
          break;
        case 'cer2':
          console.log(`id-front`, this.$refs.zh2)
          this.$refs.zh2.$children[1].$el.style = isShow ? '' : 'display: none;';
          break;
        case 'cer3':
          console.log(`id-front`, this.$refs.zh3)
          this.$refs.zh3.$children[1].$el.style = isShow ? '' : 'display: none;';
          break;
        case 'cer4':
          console.log(`id-front`, this.$refs.zh4)
          this.$refs.zh4.$children[1].$el.style = isShow ? '' : 'display: none;';
          break;
      }
    },
    handleRemove(file, fileList, name) {
      this.dialogImageUrl = '';
      this.fileDic.delete(name);
      this.hideOrShowUpload(name, true);
    },
    handlePictureChange(file, fileList, name) {
      console.log(`fileProgress=>>>`, file);
      console.log(`fileListProgress=>>>`, fileList);
      console.log(`name`, name);
      this.fileDic.set(name, file.raw);
      this.hideOrShowUpload(name, false);
    },
    handlePicturePreview(file) {
      console.log(`fileList>>>>>`, this.fileList);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
});